import { Box, Button, Typography } from '@mui/material';

const Custom404 = () => {
    return (
        <>
            <style jsx global>{`
                .container-galaxy {
                    height: calc(100vh);
                    background-image: url(/galaxy-bg.svg);
                    background-size: cover;
                }

                .galaxy {
                    height: 100%;
                    background-image: url(/item.svg);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                }

                .content {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            `}</style>
            <Box className={'container-galaxy'}>
                <Box className={'content'}>
                    <Typography variant="h1">404</Typography>
                    <Typography variant="h2">Page not found</Typography>
                    <Button variant="contained" className={`mt-4`} href="/">
                        Go to home
                    </Button>
                </Box>
            </Box>
        </>
    );
};

export default Custom404;
